<template>
  <div class="home">
    <Header></Header>
    <el-col :span="12" :class="menuBox" style="transition: 1s">
      <el-menu
        :class="demo"
        background-color="#5ca5ea"
        text-color="#ffffff"
        active-text-color="#ffffff"
        :default-active="this.$route.path"
        router
      >
        <div v-for="item in router" :key="item.routname">
          <div v-if="item.children">
            <el-submenu :index="item.routname" :disabled="disabled">
              <template slot="title">
                <i :class="item.icon" style="color: #fff"></i>
                <span>{{ item.routname }}</span>
              </template>
              <el-menu-item v-for="jtem in item.children" :key="jtem.routname" :index="jtem.path" :route="jtem.path">
                <i :class="jtem.icon" style="color: #fff"></i>
                <span slot="title">{{ jtem.routname }}</span>
              </el-menu-item>
            </el-submenu>
          </div>
          <el-menu-item v-else :index="item.path">
            <i :class="item.icon" style="color: #fff"></i>
            <span slot="title">{{ item.routname }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-col>
    <el-main class="el-mian">
      <router-view />
    </el-main>
  </div>
</template>

<script>
import Header from '@/components/Header'
export default {
  data() {
    return {
      disabled: false,
      roleId: '',
      router: [],
      status: false,
      menuBox: '',
      demo: '',
    }
  },
  created() {
    this.router = this.$store.state.menuList
    this.menuBox = 'old'
    this.demo = 'demOld'
  },
  components: {
    Header,
  },
  mounted() {
    this.roleId = localStorage.getItem('roleId')
  },
  methods: {
    fatherMethod(val) {
      if (val == 1) {
        this.disabled = true
        this.menuBox = 'new'
        this.demo = 'demNld'
      } else if (val == 2) {
        this.disabled = false
        this.menuBox = 'old'
        setTimeout(() => {
          this.demo = 'demOld'
        }, 500)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  .demOld {
    width: 100%;
    height: 90.9vh;
    display: block;
    .el-menu--collapse {
      width: 4.625rem;
    }
  }
  .demNld {
    width: 100%;
    height: 90.9vh;
    .el-menu--collapse {
      width: 4.625rem;
    }
    span {
      display: none;
    }
    ::v-deep .el-submenu__icon-arrow {
      display: none;
    }
    ::v-deep .el-menu--inline {
      display: none;
    }
  }

  .old {
    width: 14.9875rem;
    ::v-deep .el-submenu__icon-arrow {
      color: #fff !important;
    }
    ::v-deep .el-menu-item.is-active {
      background-color: #0080f6 !important;
      color: #fff;
      span {
        color: #fff !important;
      }
    }
  }
  .new {
    width: 2.9875rem;
  }
  .el-mian {
    background-color: #eaedf1;
    padding: 10px;
    margin: 0px;
    height: calc(100vh - 5.3187rem);
  }
}
.menuBox {
  overflow-y: scroll;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    //滚动条整体宽度
    width: 0;
    height: 0;
  }
  // .el-menu-vertical-demo:not(.el-menu--collapse) {
  //   width: 200px;
  //   // min-height: 400px;
  // }
  ::v-deep .el-menu-item.is-active {
    background-color: #0080f6 !important;
    color: #fff;
    span {
      color: #fff !important;
    }
  }
  ::v-deep .el-menu-vertical-demo {
    .el-submenu__title i {
      color: #fff;
    }
  }
}
.trueBox {
  width: 2.9875rem;
}
</style>
